<template>
	<view class="content">
		<view class="list-wraper">
			<view class="tit"><text>订单编号：</text></view>
			<view class="input-all">{{ data.orderId }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>公司简称：</text></view>
			<view class="input-all">{{ data.companyCode }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料名称：</text></view>
			<view class="input-all">{{ data.mlmcName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料宽幅：</text></view>
			<view class="input-all">{{ data.mlkfName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>打印模式：</text></view>
			<view class="input-all">{{ data.orderMode }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印温度：</text></view>
			<view class="input-all">{{ data.zywd }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印速度：</text></view>
			<view class="input-all">{{ data.zysd }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>订单总量：</text></view>
			<view class="input-all">{{ data.totalNumber }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>打印完成量：</text></view>
			<view class="input-all">{{ data.dyNumber }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印完成量：</text></view>
			<view class="input-all">{{ data.completedNumber }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>布料库存量：</text></view>
			<view class="input-all">{{ data.cksl }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>交货日期：</text></view>
			<view class="input-all">{{ data.receiptTime }}</view>
		</view>
		<view class="list-wraper" v-if="data.status != 1">
			<view class="tit"><text>合作人员：</text></view>
			<view class="input-all">{{ data.userName }}</view>
		</view>
		<view class="tips ind-wraper">
			<view class="type-title"><text>订单花型信息：</text></view>
			<view class="type-list-wraper" v-for="(item, index) in imgDetail" :key="item.id">
				<view class="img">
					<u-image
						:src="$http.baseUrl + item.imgPath"
						:lazy-load="true"
						@error="imageError"
						width="160rpx"
						height="200rpx"
						@click="showPhoto($http.baseUrl + item.imgPath)"
					>
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="text">
					<view class="inpt">花型名称：{{ item.fileName }}</view>
					<view class="inpt">订单总量：{{ item.number != null ? item.number : 0 }}</view>
					<view class="inpt" v-if="data.status === 3">交付数量：{{ item.zyNumber != null ? item.zyNumber : 0 }}</view>
					<view class="inpt" v-if="data.status != 3">打印完成量：{{ item.completedNumber != null ? item.completedNumber : 0 }}</view>
					<view class="inpt" v-if="data.status != 3">转印完成量：{{ item.zyNumber != null ? item.zyNumber : 0 }}</view>
					<view class="inpt" v-if="data.status != 3">本次完成量：{{ item.upNumber != null ? item.upNumber : 0 }}</view>
				</view>
				<view class="btn" v-if="data.status == 2"><u-button type="success" size="mini" @click="showInputNumber(index,item.number,item.zyNumber)">添加</u-button></view>
			</view>
		</view>
		<!-- <view class="list-wraper" v-if="data.status === 1">
			<view class="tit"><text>合作人员：</text></view>
			<view class="input-all">
				<checkbox-group @change="selUserChange">
					<label v-for="item in userList" :key="item.userId">
						<view class="tips">
							<checkbox :value="item.userId + ''" />
							{{ item.userName }}
						</view>
					</label>
				</checkbox-group>
			</view>
		</view> -->
		<view class="list-wraper" v-if="data.status === 2">
			<view class="tit"><text>已全部完成：</text></view>
			<view class="input-all">
				 <radio-group @change="radioChange">
					 <label class="radio"><radio name="orderType" value="1" checked="true" />否</label>
					 <label class="radio"><radio name="orderType" value="2" />是</label>
				 </radio-group>
			</view>
		</view>
		<view class="btn-box u-text-center">
			<view v-if="data.status === 1"><u-button type="primary" size="medium" @click="submitJd">接单</u-button></view>
			<view v-else-if="data.type === 1 && data.status != 3"><u-button type="primary" size="medium" @click="submitJd">派单</u-button></view>
		</view>
		<uni-popup ref="popup" type="dialog"><uni-popup-dialog mode="input" :value="inputNumber" title="设置派单数量" @close="close" @confirm="confirm"></uni-popup-dialog></uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			data: {},
			imgDetail: [],
			deptId: uni.getStorageSync('deptId'),
			userId: uni.getStorageSync('userId'),
			userName: uni.getStorageSync('userName'),
			thisIndex: 0,
			userList: [],
			selUser: '',
			orderId: '',
			orderType:1,
			inputNumber:0
		};
	},
	onLoad: function(option) {
		this.id = option.id;
		this.getData();
		this.getUserList();
	},
	methods: {
		getData() {
			this.$http
				.post('/zyRest/getZyOrderDetail', {
					id: this.id
				})
				.then(res => {
					if (res.data.code == '0') {
						this.data = res.data.data;
						this.imgDetail = res.data.data.imgDetail;
						this.orderId = res.data.data.orderId;
					}
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				});
		},
		getUserList() {
			this.$http
				.post('/zyRest/getZyUserList', {
					deptId: this.deptId,
					userId: this.userId
				})
				.then(res => {
					if (res.data.code == '0') {
						this.userList = res.data.data;
					}
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				});
		},
		showPhoto(url) {
			// 预览图片
			var imgArr = [];
			imgArr.push(url);
			//预览图片
			uni.previewImage({
				urls: imgArr,
				current: imgArr[0]
			});
		},
		selUserChange(e) {
			this.selUser = '';
			e.detail.value.forEach((item,index)=>{
				if(e.detail.value.length === index+1){
					this.selUser += item;
				}else{
					this.selUser += item+',';
				}
			});
		},
		radioChange(e){
			this.orderType = e.detail.value;
		},
		imageError(e) {
			console.error(e.detail.errMsg);
		},
		showInputNumber(index,number,completedNumber) {
			this.thisIndex = index;
			//设置弹出框默认值
			let thisNumber = number - completedNumber;
			if(thisNumber>0){
				this.inputNumber = thisNumber
			}
			this.$refs.popup.open('center');
		},
		confirm(value) {
			if (/^[0-9]\d*$/.test(value)) {
				let number = this.imgDetail[this.thisIndex].number;
				let completedNumber =this.imgDetail[this.thisIndex].completedNumber;
				let upNumber = value;
				// if((parseInt(completedNumber)+parseInt(upNumber))>number){
				// 	uni.showToast({
				// 		title: '修改失败，已派单数量不得大于订单总量',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				this.$set(this.imgDetail[this.thisIndex], 'upNumber', upNumber);
				this.$refs.popup.close();
			} else {
				uni.showToast({
					title: '修改失败，花型数量需大于等于0',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
		},
		close() {
			this.$refs.popup.close();
		},
		submitData(url, param){
			this.$http
				.post(url, param)
				.then(res => {
					//console.log(JSON.stringify(res))
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
					if (res.data.code == '0') {
						uni.showModal({
						    title: '提示',
						    content: res.data.msg+'，点击确定关闭页面',
						    success: function (res) {
						        if (res.confirm) {
						            uni.navigateBack();
						        } else if (res.cancel) {
						            
						        }
						    }
						});
					}
				});
		},
		submitJd() {
			let url = '/zyRest/insertZyPeople'; //接单
			let param = {
					orderId: this.orderId,
					deptId: this.deptId,
					userName: this.userName,
					userList:this.selUser ,
					};
			let content = '是否确定接单?'
			if(this.data.status != 1){
				url = '/zyRest/insertBaseFhOrder' //转派
				let order = {
						orderId: this.data.orderId,
						totalNumber: this.data.totalNumber,
						deptId: this.deptId,
						userId: this.userId,
						userName: this.userName,
						remark:"",
						orderType:this.orderType,
						imgDetail:this.imgDetail
					}
				param = {order:JSON.stringify(order)};
				content= '是否确定派单？'
			}
			var that = this;
			uni.showModal({
			    title: '提示',
			    content: content,
			    success: function (res) {
			        if (res.confirm) {
						that.submitData(url, param);
			        } else if (res.cancel) {
			            return false;
			        }
			    }
			});
			
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
	width: 100%;
	height: 100%;
}
.h-20upx {
	height: 20upx;
	display: flex;
}
.tips {
	display: flex;
	width: 100%;
	padding: 20upx 30upx;
	background-color: #ffffff;
}
.type-title {
	width: 94%;
	font-size: 28upx;
	height: 60upx;
	color: #2979ff;
}
.tips_right {
	width: 5%;
}
.tips_right image {
	width: 40upx;
	height: 40upx;
}
.input-logo {
	width: 120upx;
	height: 120upx;
	line-height: 120upx;
	text-align: center;
	font-size: 27upx;
	color: #444444;
}
.input-logo image {
	width: 120upx;
	height: 120upx;
}
.input-Image {
	width: 420upx;
	height: 320upx;
	line-height: 320upx;
	text-align: center;
	font-size: 27upx;
	border: 1upx #cccccc solid;
	color: #444444;
}
.input-Image image {
	width: 420upx;
	height: 320upx;
}
.radio {
	font-size: 28upx;
	transform: scale(0.7);
	padding-right: 50rpx;
}
.uni-list-cell {
	justify-content: flex-start;
}
</style>
<style lang="scss" scoped>
.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding-left: 30rpx;
}
</style>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content
	width 100%
	display flex
	flex-direction column
	color #333333
	.list-wraper
		position relative
		display flex
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		.tit
			flex 1.5
			text
				font-size 28upx

		.input-all
			flex 4
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.type-list-wraper
		position relative
		display flex
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		border-bottom 1rpx #CCCCCC solid
		.img
			flex 3
			text
				font-size 28upx
		.text
			flex 5
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.logo-wraper
		.input-all
			text-align right
			image
				width 100upx
				height 100upx

	.list-wraper::after
		position absolute
		content ""
		width calc(100% - 60upx)
		height 2upx
		left 30upx
		bottom 0
		background #CCCCCC
	.ind-wraper
		flex-direction column
		justify-content left
		.tit
			width 100%
		.input-lg
			width 100%
			padding 20upx 10upx
			// background red
			.lg-text
				font-size 24upx
				color #777777
	.btn-box
		width 100%;
		padding 40upx 30upx
</style>
